<template>
  <div class="home-page">
    <!-- 主要内容区域 -->
    <div class="home-content">
      <!-- 欢迎区域 -->
      <div class="welcome-section">
        <div class="welcome-content">
          <div class="welcome-text">
            <h1 class="welcome-title">
              欢迎来到
              <span class="brand-name">CardCaptor Sakura</span>
            </h1>
            <p class="welcome-description">
              您的智能AI助手，拥有多重人格，能够为您提供医疗咨询、料理指导、情感陪伴等多样化服务
            </p>
          </div>

          <div class="welcome-avatar">
            <div class="avatar-container">
              <img
                :src="currentPersona?.avatar || '/images/default-avatar.png'"
                :alt="currentPersona?.name || 'AI助手'"
                class="avatar-image"
              />
              <div class="avatar-status" :class="{ online: isOnline }">
                <div class="status-dot"></div>
              </div>
            </div>

            <div class="persona-info">
              <h3 class="persona-name">
                {{ currentPersona?.name || "选择人格" }}
              </h3>
              <p class="persona-description">
                {{
                  currentPersona?.description || "点击选择一个AI人格开始对话"
                }}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速操作区域 -->
      <div class="quick-actions">
        <div class="actions-header">
          <h2 class="actions-title">快速开始</h2>
          <p class="actions-description">选择一个功能快速开始使用</p>
        </div>

        <div class="actions-grid">
          <div
            v-for="action in quickActions"
            :key="action.id"
            class="action-card"
            :class="{ disabled: action.disabled }"
            @click="handleQuickAction(action)"
          >
            <div class="action-icon">
              <Icon :name="action.icon" :size="24" />
            </div>

            <div class="action-content">
              <h3 class="action-title">{{ action.title }}</h3>
              <p class="action-description">{{ action.description }}</p>
            </div>

            <div class="action-arrow">
              <Icon name="chevron-right" :size="16" />
            </div>
          </div>
        </div>
      </div>

      <!-- 人格选择区域 -->
      <div class="personas-section">
        <div class="personas-header">
          <h2 class="personas-title">选择AI人格</h2>
          <p class="personas-description">
            每个人格都有独特的专业领域和性格特点
          </p>
        </div>

        <div class="personas-grid">
          <div
            v-for="persona in availablePersonas"
            :key="persona.id"
            class="persona-card"
            :class="{
              active: currentPersona?.id === persona.id,
              disabled: persona.disabled,
            }"
            @click="selectPersona(persona)"
          >
            <div class="persona-avatar">
              <img
                :src="persona.avatar"
                :alt="persona.name"
                class="persona-image"
              />
              <div
                v-if="currentPersona?.id === persona.id"
                class="active-indicator"
              >
                <Icon name="check" :size="12" />
              </div>
            </div>

            <div class="persona-info">
              <h3 class="persona-name">{{ persona.name }}</h3>
              <p class="persona-role">{{ persona.role }}</p>
              <p class="persona-description">{{ persona.description }}</p>

              <div class="persona-tags">
                <span
                  v-for="tag in persona.tags"
                  :key="tag"
                  class="persona-tag"
                >
                  {{ tag }}
                </span>
              </div>
            </div>

            <div class="persona-actions">
              <Button
                v-if="currentPersona?.id === persona.id"
                type="primary"
                size="small"
                @click.stop="startChat"
              >
                开始对话
              </Button>
              <Button
                v-else
                type="secondary"
                size="small"
                @click.stop="selectPersona(persona)"
              >
                选择
              </Button>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近对话区域 -->
      <div v-if="recentChats.length > 0" class="recent-section">
        <div class="recent-header">
          <h2 class="recent-title">最近对话</h2>
          <Button type="text" icon="more-horizontal" @click="viewAllChats">
            查看全部
          </Button>
        </div>

        <div class="recent-list">
          <div
            v-for="chat in recentChats.slice(0, 5)"
            :key="chat.id"
            class="recent-item"
            @click="openChat(chat)"
          >
            <div class="recent-avatar">
              <img
                :src="chat.persona.avatar"
                :alt="chat.persona.name"
                class="recent-image"
              />
            </div>

            <div class="recent-content">
              <div class="recent-info">
                <h4 class="recent-name">{{ chat.persona.name }}</h4>
                <span class="recent-time">{{
                  formatTime(chat.lastMessageTime)
                }}</span>
              </div>
              <p class="recent-message">{{ chat.lastMessage }}</p>
            </div>

            <div class="recent-arrow">
              <Icon name="chevron-right" :size="14" />
            </div>
          </div>
        </div>
      </div>

      <!-- 功能介绍区域 -->
      <div class="features-section">
        <div class="features-header">
          <h2 class="features-title">核心功能</h2>
          <p class="features-description">了解CardCaptor Sakura的强大功能</p>
        </div>

        <div class="features-grid">
          <div
            v-for="feature in coreFeatures"
            :key="feature.id"
            class="feature-card"
          >
            <div class="feature-icon">
              <Icon :name="feature.icon" :size="32" />
            </div>

            <div class="feature-content">
              <h3 class="feature-title">{{ feature.title }}</h3>
              <p class="feature-description">{{ feature.description }}</p>

              <ul class="feature-list">
                <li
                  v-for="item in feature.items"
                  :key="item"
                  class="feature-item"
                >
                  <Icon name="check" :size="12" />
                  <span>{{ item }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 浮动操作按钮 -->
    <div class="floating-actions">
      <Button
        type="primary"
        size="large"
        icon="message-circle"
        class="fab-chat"
        @click="startQuickChat"
      >
        开始对话
      </Button>

      <Button
        type="secondary"
        size="medium"
        icon="user"
        class="fab-persona"
        @click="openPersonaSelector"
      >
        切换人格
      </Button>
    </div>

    <!-- 人格选择器弹窗 -->
    <PersonaSelector
      v-if="showPersonaSelector"
      :visible="showPersonaSelector"
      @close="showPersonaSelector = false"
      @select="handlePersonaSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { usePersonaStore } from "@/stores/persona";
import { useChatStore } from "@/stores/chat";
import Icon from "@/components/common/Icon.vue";
import Button from "@/components/common/Button.vue";
import PersonaSelector from "@/components/persona/PersonaSelector.vue";

interface Persona {
  id: string;
  name: string;
  role: string;
  description: string;
  avatar: string;
  tags: string[];
  disabled?: boolean;
}

interface QuickAction {
  id: string;
  title: string;
  description: string;
  icon: string;
  action: string;
  disabled?: boolean;
}

interface RecentChat {
  id: string;
  persona: Persona;
  lastMessage: string;
  lastMessageTime: Date;
}

interface CoreFeature {
  id: string;
  title: string;
  description: string;
  icon: string;
  items: string[];
}

// Router
const router = useRouter();

// Stores
const personaStore = usePersonaStore();
const chatStore = useChatStore();

// 响应式数据
const showPersonaSelector = ref(false);
const isOnline = ref(true);

// 当前人格
const currentPersona = computed(() => personaStore.currentPersona);

// 可用人格列表
const availablePersonas = ref<Persona[]>([
  {
    id: "sakura",
    name: "小樱",
    role: "魔法少女",
    description: "活泼可爱的魔法少女，擅长日常对话和情感陪伴",
    avatar: "/images/personas/sakura.png",
    tags: ["可爱", "活泼", "陪伴"],
  },
  {
    id: "doctor",
    name: "医生助手",
    role: "医疗专家",
    description: "专业的医疗知识顾问，提供健康咨询和医疗建议",
    avatar: "/images/personas/doctor.png",
    tags: ["专业", "医疗", "健康"],
  },
  {
    id: "chef",
    name: "料理专家",
    role: "美食达人",
    description: "精通各国料理的美食专家，提供食谱和烹饪指导",
    avatar: "/images/personas/chef.png",
    tags: ["美食", "料理", "创意"],
  },
  {
    id: "companion",
    name: "情感陪伴",
    role: "心理顾问",
    description: "温暖贴心的情感陪伴者，提供心理支持和情感疏导",
    avatar: "/images/personas/companion.png",
    tags: ["温暖", "理解", "支持"],
  },
]);

// 快速操作
const quickActions = ref<QuickAction[]>([
  {
    id: "chat",
    title: "开始对话",
    description: "与AI助手进行自然对话",
    icon: "message-circle",
    action: "chat",
  },
  {
    id: "health",
    title: "健康咨询",
    description: "获取专业的健康建议",
    icon: "heart",
    action: "health",
  },
  {
    id: "recipe",
    title: "料理指导",
    description: "学习美味料理的制作方法",
    icon: "chef-hat",
    action: "recipe",
  },
  {
    id: "emotion",
    title: "情感支持",
    description: "获得温暖的情感陪伴",
    icon: "heart-handshake",
    action: "emotion",
  },
]);

// 最近对话
const recentChats = ref<RecentChat[]>([]);

// 核心功能
const coreFeatures = ref<CoreFeature[]>([
  {
    id: "multimodal",
    title: "多模态交互",
    description: "支持文字、语音、图像等多种输入方式",
    icon: "layers",
    items: ["文字对话", "语音识别", "图像理解", "文件上传"],
  },
  {
    id: "personas",
    title: "多重人格",
    description: "不同专业领域的AI人格，满足各种需求",
    icon: "users",
    items: ["医疗专家", "料理大师", "情感陪伴", "日常助手"],
  },
  {
    id: "knowledge",
    title: "知识管理",
    description: "智能知识库，提供准确可靠的信息",
    icon: "book-open",
    items: ["专业知识", "实时更新", "个性化推荐", "学习记忆"],
  },
  {
    id: "privacy",
    title: "隐私保护",
    description: "严格的隐私保护机制，确保数据安全",
    icon: "shield",
    items: ["本地存储", "数据加密", "隐私控制", "安全传输"],
  },
]);

// 方法
const selectPersona = async (persona: Persona) => {
  if (persona.disabled) return;

  try {
    await personaStore.switchPersona(persona.id);
  } catch {
    // 切换人格失败
  }
};

const handleQuickAction = (action: QuickAction) => {
  if (action.disabled) return;

  switch (action.action) {
    case "chat":
      startChat();
      break;
    case "health":
      selectPersona(availablePersonas.value.find((p) => p.id === "doctor")!);
      setTimeout(() => startChat(), 100);
      break;
    case "recipe":
      selectPersona(availablePersonas.value.find((p) => p.id === "chef")!);
      setTimeout(() => startChat(), 100);
      break;
    case "emotion":
      selectPersona(availablePersonas.value.find((p) => p.id === "companion")!);
      setTimeout(() => startChat(), 100);
      break;
  }
};

const startChat = () => {
  if (!currentPersona.value) {
    showPersonaSelector.value = true;
    return;
  }

  router.push("/chat");
};

const startQuickChat = () => {
  startChat();
};

const openPersonaSelector = () => {
  showPersonaSelector.value = true;
};

const handlePersonaSelect = (persona: Persona) => {
  selectPersona(persona);
  showPersonaSelector.value = false;
};

const openChat = (chat: RecentChat) => {
  router.push(`/chat/${chat.id}`);
};

const viewAllChats = () => {
  router.push("/chats");
};

const formatTime = (time: Date): string => {
  const now = new Date();
  const diff = now.getTime() - time.getTime();
  const minutes = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);

  if (minutes < 1) return "刚刚";
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;

  return time.toLocaleDateString("zh-CN");
};

const loadRecentChats = async () => {
  try {
    const chats = await chatStore.getRecentChats();
    recentChats.value = chats;
  } catch {
    // 加载最近对话失败
  }
};

// 生命周期
onMounted(async () => {
  await loadRecentChats();
});
</script>

<style scoped>
/* 主页基础样式 */
.home-page {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    var(--bg-primary) 0%,
    var(--bg-secondary) 100%
  );
  position: relative;
}

.home-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 欢迎区域 */
.welcome-section {
  margin-bottom: 60px;
}

.welcome-content {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 40px;
  background: var(--bg-secondary);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px;
  line-height: 1.2;
}

.brand-name {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-description {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.welcome-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.avatar-container {
  position: relative;
}

.avatar-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.avatar-status {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-secondary);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: all 0.3s ease;
}

.avatar-status.online .status-dot {
  background: var(--success-color);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.persona-info {
  text-align: center;
}

.persona-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.persona-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* 快速操作区域 */
.quick-actions {
  margin-bottom: 60px;
}

.actions-header {
  text-align: center;
  margin-bottom: 40px;
}

.actions-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.actions-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.action-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

.action-card:hover::before {
  left: 100%;
}

.action-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}

.action-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-color-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.action-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.action-arrow {
  color: var(--text-tertiary);
  transition: all 0.3s ease;
}

.action-card:hover .action-arrow {
  color: var(--primary-color);
  transform: translateX(4px);
}

/* 人格选择区域 */
.personas-section {
  margin-bottom: 60px;
}

.personas-header {
  text-align: center;
  margin-bottom: 40px;
}

.personas-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.personas-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.persona-card {
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 24px;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.persona-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color-light);
}

.persona-card.active {
  border-color: var(--primary-color);
  background: var(--primary-color-light);
}

.persona-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.persona-card.disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}

.persona-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.persona-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-color);
  transition: all 0.3s ease;
}

.persona-card:hover .persona-image {
  border-color: var(--primary-color);
}

.active-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 2px solid var(--bg-secondary);
}

.persona-info {
  text-align: center;
  margin-bottom: 20px;
}

.persona-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.persona-role {
  font-size: 14px;
  color: var(--primary-color);
  font-weight: 500;
  margin: 0 0 12px;
}

.persona-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 16px;
}

.persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.persona-tag {
  padding: 4px 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.persona-actions {
  display: flex;
  justify-content: center;
}

/* 最近对话区域 */
.recent-section {
  margin-bottom: 60px;
}

.recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.recent-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.recent-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary-color-light);
}

.recent-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.recent-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.recent-content {
  flex: 1;
  min-width: 0;
}

.recent-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.recent-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.recent-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.recent-message {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* 功能介绍区域 */
.features-section {
  margin-bottom: 60px;
}

.features-header {
  text-align: center;
  margin-bottom: 40px;
}

.features-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.features-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 32px 24px;
  border: 1px solid var(--border-color);
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color-light);
}

.feature-icon {
  width: 64px;
  height: 64px;
  background: var(--primary-color-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin: 0 auto 20px;
}

.feature-content {
  text-align: left;
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  text-align: center;
}

.feature-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.feature-item .icon {
  color: var(--success-color);
  flex-shrink: 0;
}

/* 浮动操作按钮 */
.floating-actions {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
}

.fab-chat {
  box-shadow: var(--shadow-xl);
}

.fab-persona {
  box-shadow: var(--shadow-lg);
}

/* 响应式 */
@media (max-width: 1024px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .welcome-title {
    font-size: 40px;
  }

  .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .personas-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .home-content {
    padding: 20px 16px;
  }

  .welcome-content {
    padding: 24px;
  }

  .welcome-title {
    font-size: 32px;
  }

  .actions-title,
  .personas-title,
  .features-title {
    font-size: 24px;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .personas-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .floating-actions {
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  .welcome-title {
    font-size: 28px;
  }

  .welcome-description {
    font-size: 16px;
  }

  .action-card {
    padding: 20px;
  }

  .persona-card {
    padding: 20px;
  }

  .feature-card {
    padding: 24px 20px;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .home-page {
    background: linear-gradient(
      135deg,
      var(--bg-primary) 0%,
      var(--bg-secondary) 100%
    );
  }
}
</style>
